<template>
  <div>
    <!-- 头部 -->
    <header>
      <div>
        <span @click="Return" class="jiantou"></span>
        <p>密码登录</p>
      </div>
    </header>
    <main>
      <div class="separatrix"></div>
      <van-form @submit="onSubmit">
        <van-field
          class="zhanghao"
          v-model="username"
          name="账号"
          placeholder="账号"
          :rules="[{ required: true, message: '请输入账号' }]"
        />
        <van-field
          class="zhanghao"
          v-model="password"
          :type="psd"
          name="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field class="dw" name="switch">
          <template #input>
            <van-switch @click="type" v-model="switchChecked" size="20" />
          </template>
        </van-field>
        <input v-model="code" class="yzm" type="text" placeholder="验证码" />
        <img :src="url" alt="" />
        <p class="te" @click="huan">
          <span>看不清</span>
          <span class="lan">换一张</span>
        </p>
        <div style="margin: 16px">
          <van-button
            @click="Submit"
            round
            block
            type="info"
            native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </main>
  </div>
</template>
<style scoped>
.lan {
  color: #3190e8;
}
.te {
  font-size: 0.3rem;
  position: relative;
  z-index: 1002;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  top: -1.4rem;
  right: 0;
  padding-left: 80%;
  box-sizing: border-box;
}
img {
  position: relative;
  z-index: 1000;
}
.yzm {
  width: 40%;
  height: 0.8rem;
  position: relative;
  top: -0.3rem;
  z-index: 10000;
  margin-left: 0.4rem;
  box-sizing: border-box;
  padding-left: 0.4rem;
  font-size: 0.4rem;
  border: 0 solid #000;
}
.van-cell {
  overflow: visible !important;
}
.van-switch--on {
  background-color: #4cd964;
}
.van-switch {
  position: absolute;
  right: 0;
  top: -1.05rem;
}
.dw {
  position: absolute;
}
.zhanghao {
  color: #666 !important;
}
header {
  position: fixed;
  z-index: 1990;
  top: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background-color: #3190e8;
}
header div {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 60%;
  height: 1rem;
  color: #fff;
  box-sizing: border-box;
  font-weight: 700;
}
header div p {
  font-size: 0.4rem;
}
.jiantou {
  width: 0.24rem;
  height: 0.24rem;
  fill: #fff;
  border: 1px solid #fff;
  border-width: 0.06rem 0.06rem 0px 0px;
  transform: rotateZ(225deg);
}
main {
  margin-top: 1rem;
}
.separatrix {
  height: 0.3rem;
  width: 100%;
  background-color: #f5f5f5;
}
</style>
<script>
import Vue from "vue";
import { Form } from "vant";
import { Field } from "vant";
import { Switch } from "vant";

Vue.use(Switch);

Vue.use(Form);
Vue.use(Field);
import { jianyan, yanzheng } from "../../api/index.js";
export default {
  data() {
    return {
      username: "",
      password: "",
      switchChecked: false,
      psd: "password",
      code: "",
      arr: [],
      url: "",
    };
  },
  methods: {
    /* 返回 */
    Return() {
      this.$router.go(-1);
    },
    /* 账号密码 */
    onSubmit(values) {
      // console.log("submit", values);
    },
    /* 判断类型 */
    type() {
      if (this.switchChecked) {
        this.psd = "password";
      } else {
        this.psd = "text";
      }
    },
    /* 提交 */
    async Submit() {
      var reg = await jianyan({
        captcha_code: this.code,
        password: this.password,
        username: this.username,
      });
      if (reg.data) {
        this.arr = reg.data;
        // console.log(this.arr);
      }
      localStorage.submit = JSON.stringify(this.arr);
      if (
        this.arr.message != "验证码不正确" &&
        this.arr.message != "验证码失效"
      ) {
        localStorage.dl = "成功";
        this.$router.push({
          path: "/my-elm",
          query: {
            arr1: this.arr,
          },
        });
      } else {
        alert(this.arr.message);
        var regg1 = await yanzheng();
        if (regg1.data) {
          this.url = regg1.data.code;
        }
      }
    },
    /* 换验证图片 */
    async huan() {
      var regg2 = await yanzheng();
      if (regg2.data) {
        this.url = regg2.data.code;
        // console.log(regg);
      }
    },
  },
  /* 页面渲染img */
  async mounted() {
    var regg3 = await yanzheng();
    if (regg3.data) {
      this.url = regg3.data.code;
      console.log(regg3
      );
    }
  },
};
</script>
